<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        html,
        body {
            font-family: Arial, Verdana, Helvetica, sans-serif;
            min-height: 100%;
        }

        .flex-table {
            display: grid;
            grid-template-columns: repeat(auto-fill, 25%);
        }

        .flex-table>.row {
            grid-column-start: 2;
            grid-column-end: 3;
        }

        .text-center {
            text-align: center;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .btn {
            display: inline-block;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            border: 1px solid transparent;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            border-radius: 4px;
        }

        .btn-lg {
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333;
            border-radius: 6px;
        }

        .btn-primary {
            color: #fff;
            background-color: #337ab7;
            border-color: #2e6da4;
        }

        .btn-danger {
            color: #fff;
            background-color: #d9534f;
            border-color: #d43f3a;
        }
    </style>
    <title>{{AppTitle}} v{{AppVersion}}</title>
</head>

<body>
    <h1 class="text-center">{{ThingName}}</h1>
    <hr>

    <div class="alert alert-info">
        <h3 class="text-center">
            Press on the button below to change the settings<br><br>
            <button type="button" class="btn btn-lg btn-primary" onclick="location.href='config'">Change
                settings</button>
        </h3>
    </div>


    <h2 class="text-center">ESP32</h2>
    <div class="flex-table">
        <div class="row">Board type:</div>
        <div>{{BoardType}}</div>
        <div class="row">SDK Version:</div>
        <div>{{SDKVersion}}</div>
        <div class="row">CPU model:</div>
        <div>{{ChipModel}} rev. {{ChipRevision}}</div>
        <div class="row">CPU speed:</div>
        <div>{{CpuFreqMHz}} Mhz</div>
        <div class="row">CPU cores:</div>
        <div>{{CpuCores}}</div>
        <div class="row">RAM size:</div>
        <div>{{HeapSize}}</div>
        <div class="row">PSRAM size:</div>
        <div>{{PsRamSize}}</div>
        <div class="row">Flash size:</div>
        <div>{{FlashSize}}</div>
    </div>

    <h2 class="text-center">Diagnostics</h2>
    <div class="flex-table">
        <div class="row">Uptime:</div>
        <div>{{Uptime}}</div>
        <div class="row">RTSP sessions:</div>
        <div>{{NumRTSPSessions}}</div>
        <div class="row">Free heap:</div>
        <div>{{FreeHeap}}</div>
        <div class="row">Max free block:</div>
        <div>{{MaxAllocHeap}}</div>
    </div>

    <h2 class="text-center">Network</h2>
    <div class="flex-table">
        <div class="row">Host name:</div>
        <div>{{HostName}}</div>
        <div class="row">Mac address:</div>
        <div>{{MacAddress}}</div>
        <div class="row">Wifi mode:</div>
        <div>{{WifiMode}}</div>
        <div class="row">Access point:</div>
        <div>{{AccessPoint}}</div>
        <div class="row">Signal strength:</div>
        <div>{{SignalStrength}} dbm</div>
        <div class="row">IPv4 address:</div>
        <div>{{IPv4}}</div>
        <div class="row">IPv6 address:</div>
        <div>{{IPv6}}</div>
    </div>

    {{#NetworkState.ApMode}}
    <div class="alert alert-warning">
        <h3 class="text-center">Not connected to an access point.<br>Consider configuring the access point.</h3>
    </div>
    {{/NetworkState.ApMode}}

    {{#NetworkState.OnLine}}
    <div class="alert alert-success">
        <h3 class="text-center">Connected to the access point</h3>
    </div>
    {{/NetworkState.OnLine}}

    <h2 class="text-center">Camera</h2>
    <div class="flex-table">
        <div class="row">Frame rate:</div>
        <div>{{FrameDuration}} ms ({{FrameFrequency}} f/s)</div>
        <div class="row">Frame size:</div>
        <div>{{FrameSize}}</div>
        <div class="row">JPEG quality:</div>
        <div>{{JpegQuality}} [1-100]</div>
        <div class="row">Brightness:</div>
        <div>{{Brightness}} [-2,2]</div>
        <div class="row">Contrast:</div>
        <div>{{Contrast}} [-2,2]</div>
        <div class="row">Saturation:</div>
        <div>{{Saturation}} [-2,2]</div>
        <div class="row">Special effect:</div>
        <div>{{SpecialEffect}}</div>
        <div class="row">White balance:</div>
        <div>{{#WhiteBal}}Auto{{/WhiteBal}}{{^WhiteBal}}Manual{{/WhiteBal}}</div>
        <div class="row">AWB gain:</div>
        <div>{{#AwbGain}}Auto{{/AwbGain}}{{^AwbGain}}Manual{{/AwbGain}}</div>
        <div class="row">WB mode:</div>
        <div>{{WbMode}}</div>
        <div class="row">Exposure control:</div>
        <div>{{#ExposureCtrl}}Auto{{/ExposureCtrl}}{{^ExposureCtrl}}Manual{{/ExposureCtrl}}</div>
        <div class="row">Auto exposure control (dsp):</div>
        <div>{{#Aec2}}Enabled{{/Aec2}}{{^Aec2}}Disabled{{/Aec2}}</div>
        <div class="row">Auto Exposure level:</div>
        <div>{{AeLevel}}</div>
        <div class="row">Manual exposure value:</div>
        <div>{{AecValue}}</div>
        <div class="row">Gain control:</div>
        <div>{{#GainCtrl}}Auto{{/GainCtrl}}{{^GainCtrl}}Manual{{/GainCtrl}}</div>
        <div class="row">AGC gain:</div>
        <div>{{AgcGain}}</div>
        <div class="row">Gain ceiling:</div>
        <div>{{GainCeiling}}</div>
        <div class="row">Black pixel correct:</div>
        <div>{{#Bpc}}Auto{{/Bpc}}{{^Bpc}}Manual{{/Bpc}}</div>
        <div class="row">White pixel correct:</div>
        <div>{{#Wpc}}Auto{{/Wpc}}{{^Wpc}}Manual{{/Wpc}}</div>
        <div class="row">Gamma correct:</div>
        <div>{{#RawGma}}Enabled{{/RawGma}}{{^RawGma}}Disabled{{/RawGma}}</div>
        <div class="row">Lens correction:</div>
        <div>{{#Lenc}}Enabled{{/Lenc}}{{^Lenc}}Disabled{{/Lenc}}</div>
        <div class="row">Horizontal mirror:</div>
        <div>{{#HMirror}}Mirrored{{/HMirror}}{{^HMirror}}Normal{{/HMirror}}</div>
        <div class="row">Vertical flip:</div>
        <div>{{#VFlip}}Flipped{{/VFlip}}{{^VFlip}}Normal{{/VFlip}}</div>
        <div class="row">Downsize enable:</div>
        <div>{{#Dcw}}Enabled{{/Dcw}}{{^Dcw}}Disabled{{/Dcw}}</div>
        <div class="row">Color bar:</div>
        <div>{{#ColorBar}}Enabled{{/ColorBar}}{{^ColorBar}}Camera{{/ColorBar}}</div>
    </div>

    {{#CameraInitialized}}
    <div class="alert alert-success">
        <h3 class="text-center">Camera was initialized successfully!</h3>
    </div>
    {{/CameraInitialized}}
    {{^CameraInitialized}}
    <div class="alert alert-danger">
        <h3 class="text-center">Failed to initialize the camera!<br>
            Result: {{CameraInitResult}} ({{CameraInitResultText}})<br>
            Please check hardware or correct the camera settings and restart.<br><br>
            <button type="button" class="btn btn-danger" onclick="location.href='restart'">Restart</button>
        </h3>
    </div>
    {{/CameraInitialized}}


    <h2 class="text-center">Special URLs / API</h2>
    <div class="flex-table">
        <div class="row">RTSP camera stream:</div>
        <div><a href="rtsp://{{IPv4}}:{{RtspPort}}/mjpeg/1">rtsp://{{IPv4}}:{{RtspPort}}/mjpeg/1</a></div>
        <div class="row">JPEG Motion stream:</div>
        <div><a href="http://{{IPv4}}/stream" target="_blank" rel="noopener">http://{{IPv4}}/stream</a></div>
        <div class="row">Snapshot of the camera:</div>
        <div><a href="http://{{IPv4}}/snapshot " target="_blank" rel="noopener">http://{{IPv4}}/snapshot</a> </div>
    </div>

</body>

</html>